import * as React from 'react';
import { forwardRef } from 'react';
import CityStationOperationStatus from '../city-station-operation-status/city-station-operation-status';
import StatusBar from '../status-bar/status-bar';
import TitleHeader from '../title-header/title-header';
import DensityDisplay from '../density-display/density-display';
import LawEnforcement from '../law-enforcement/law-enforcement';
import './index.scss';

export interface CityStationLeftProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 组件ID
   */
  componentId?: string;
  
  // CityStationOperationStatus 组件的属性
  operationStatus?: {
    width?: number;
    height?: number;
    noResponsiveScale?: boolean;
    statusBar?: {
      chineseText?: string;
      englishText?: string;
      theme?: 'dark' | 'light';
    };
    [key: string]: any;
  };
  
  // StatusBar 组件的属性
  statusBar?: {
    chineseText?: string;
    englishText?: string;
    theme?: 'dark' | 'light';
  };
  
  // TitleHeader 组件的属性
  titleHeader?: {
    title?: string;
    noResponsiveScale?: boolean;
  };
  
  // DensityDisplay 组件的属性
  densityDisplay?: {
    moduleCount?: number;
    dataItems?: Array<{
      label: string;
      value: number;
      icon: string;
    }>;
    showValues?: boolean;
    [key: string]: any;
  };
  
  // LawEnforcement 组件的属性
  lawEnforcement?: {
    [key: string]: any;
  };

  __designMode?: boolean;
}

const CityStationLeft = forwardRef<HTMLDivElement, CityStationLeftProps>(({
  className = '',
  style = {},
  width,
  height,
  componentId,
  operationStatus = {},
  statusBar = {},
  titleHeader = {},
  densityDisplay = {},
  lawEnforcement = {},
  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `city-station-left ${className}`.trim();
  const customStyle: React.CSSProperties = { ...style };

  // 只在设计模式下应用宽高属性，避免覆盖CSS缩放
  if (__designMode && width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  if (__designMode && height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  return (
    <div 
      ref={ref} 
      className={combinedClassName} 
      style={customStyle}
      id={componentId}
      {...otherProps}
    >
      {/* 第一部分：运营现状组件 */}
      <div className="city-station-left__operation-section">
        <CityStationOperationStatus
          width={500}
          height={395}
          noResponsiveScale={true}
          statusBar={{
            chineseText: operationStatus.statusBar?.chineseText || "运营现状",
            englishText: operationStatus.statusBar?.englishText || "Operation Status",
            theme: operationStatus.statusBar?.theme || 'dark'
          }}
          {...operationStatus}
        />
      </div>

      {/* 第二部分：状态栏组件 */}
      <div className="city-station-left__status-section">
        <StatusBar
          chineseText={statusBar.chineseText || "城站专题"}
          englishText={statusBar.englishText || "CITY STATION"}
          theme={statusBar.theme || 'dark'}
        />
      </div>
      <div className="city-station-left__kjaq">
      {/* 第三部分：标题组件 */}
      <div className="city-station-left__title-section">
        <TitleHeader
          title={titleHeader.title || "专题分析"}
          noResponsiveScale={true}
          {...titleHeader}
        />
      </div>

      {/* 第四部分：密度显示组件 */}
      <div className="city-station-left__density-section">
        <DensityDisplay
          moduleCount={densityDisplay.moduleCount || 4}
          dataItems={densityDisplay.dataItems || [
            { label: '进站人数', value: 1250, icon: '🚶' },
            { label: '出站人数', value: 980, icon: '🚶' },
            { label: '候车人数', value: 320, icon: '🚶' },
            { label: '工作人员', value: 45, icon: '👷' }
          ]}
          showValues={densityDisplay.showValues !== false}
          {...densityDisplay}
        />
      </div>
    </div>
      {/* 第五部分：执法管理组件 */}
      <div className="city-station-left__enforcement-section">
        <LawEnforcement
          {...lawEnforcement}
        />
      </div>
    </div>
  );
});

CityStationLeft.displayName = 'CityStationLeft';

export default CityStationLeft;
